<template>
    <div class="bg-white dark:bg-gery-800 p-1">
        <a-tabs size="small" @tabClick="clickMenu" class="system_router_tabs w-full" v-model:activeKey="activeKey" hide-add type="card" @edit="onEdit">
            <a-tab-pane v-for="item in state.store.menu.routerTabs" :key="item.path" :closable="state.store.menu.routerTabs.length === 1 ? false : true">
                <template #tab>
                    <a-dropdown :trigger="['contextmenu']" :disabled="item.path !== state.route.path">
                        <div style="padding: 6px 15px 6px 15px">
                            <span>{{ item.title }}</span>
                            <a @click.stop="close" class="animate__animated animate__rollIn" title="关闭页签" href="javascript:;" v-if=" state.store.menu.routerTabs.length !== 1">
                                <sysIcon class="link text-zinc-500" type="system-changyong_guanbi" style="font-size: 12px; margin-right: 0; margin-left: 6px" />
                            </a>
                        </div>
                        <template #overlay>
                            <a-menu>
                                <a-menu-item key="1" @click="refresh">刷新当前</a-menu-item>
                                <a-menu-item v-if="state.store.menu.routerTabs.length !== 1" key="2" @click="close">关闭当前</a-menu-item>
                                <a-menu-item :disabled="state.store.menu.routerTabs.length > 1 ? false : true" key="2" @click="cloesOtherPage">关闭其他</a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </template>
            </a-tab-pane>
            <template #rightExtra>
                <a-dropdown>
                    <span class="pt-2 cursor-pointer" style="padding: 8px 16px">
                        <sysIcon class="link" type="system-androidgengduo" style="font-size: 18px" />
                    </span>
                    <template #overlay>
                        <a-menu>
                            <a-menu-item>
                                <a href="javascript:;" @click="refresh">刷新当前</a>
                            </a-menu-item>
                            <a-menu-item v-if="state.store.menu.routerTabs.length !== 1">
                                <a href="javascript:;" @click="close">关闭当前</a>
                            </a-menu-item>
                            <a-menu-item :disabled="state.store.menu.routerTabs.length > 1 ? false : true">
                                <a href="javascript:;" @click="cloesOtherPage">关闭其他</a>
                            </a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>
            </template>
        </a-tabs>
    </div>
</template>
<script setup>
const emits = defineEmits(['refresh'])
const state = reactive({
    activeKey: '',
    store: useStore(),
    router: useRouter(),
    route: useRoute(),
})
state.activeKey = useRoute().path

onBeforeRouteUpdate(to => {
    state.activeKey = to.path
})
//关闭当前路由
const close = () => {
    onEdit(state.route.path)
}
//路由跳转
const clickMenu = item => {
    state.router.push(item)
}
//新增或删除页签的回调
const onEdit = targetKey => {
    let routerTabs = state.store.menu.routerTabs
    if (routerTabs.length === 1) {
        message.warning('至少保留一个标签页')
        return
    }
    let index = getIndex({
        datas: routerTabs,
        name: 'path',
        value: targetKey,
    })
    if (routerTabs[index].path === state.activeKey) {
        routerTabs.splice(index, 1)
        state.router.push(routerTabs[0].path)
        state.activeKey = routerTabs[0].path
    } else {
        routerTabs.splice(index, 1)
    }
    state.store.menu.routerTabs = routerTabs
}
//关闭其他页签
const cloesOtherPage = () => {
    let routerTabs = state.store.menu.routerTabs
    let index = getIndex({
        datas: routerTabs,
        name: 'path',
        value: state.activeKey,
    })

    let newRouterTable = routerTabs[index]
    state.store.menu.routerTabs = [newRouterTable]
}
// 刷新当前页签
const refresh = () => {
    emits('refresh', state.activeKey)
}

const { activeKey } = toRefs(state)
</script>
<style>
/* 多页签下tab组件自定义样式 */
.system_router_tabs.ant-tabs > .ant-tabs-nav {
    margin: 0;
}
.system_router_tabs.ant-tabs > .ant-tabs-nav .ant-tabs-tab {
    padding: 0 !important;
}
.system_router_tabs.ant-tabs > .ant-tabs-nav .ant-tabs-tab .anticon {
    margin-left: 3px !important;
}
.system_router_tabs.ant-tabs > .ant-tabs-nav .ant-tabs-tab:hover {
    color: #333;
}
</style>
